<template>
	<view>
		<uni-popup ref="scopePickRef" @maskClick="closePopup()">
			<view class="popup-bd">
				<view class="popup-title mt20">
					业务范围
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view class="df ac p20">
						<avatar
							:name="
								loginUser.name.length > 2
									? loginUser.name.substr(
											loginUser.name.length - 2,
											2
									  )
									: loginUser.name
							"
							:width="100"
							:fontsize="30"
							:avatarIcon="'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130571/ORG/1a64ne1pp7jin5pjmnbuu1j2b.jpg'"
						></avatar>
						<view class="ml30 c10 f32">{{ loginUser.name }}</view>
					</view>
					<view class="f30 p20 c6">
						<view class="c6 mb20">业务范围:</view>
						<view
							v-for="item in userWorkRange"
							:key="item.hospitalId"
						>
							<view class="mb10">
								<view class="df ac"
									><view class="item-icon" />{{
										item.hospitalName
									}}</view
								>
								<view>{{ item.departNames.join('/') }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="default-button w90" @tap="closePopup()">
						关闭
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import avatar from '@/components/avatar/avatar.vue'
export default {
	components: { avatar },
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
	},
	data() {
		return {
			userWorkRange: [],
		}
	},
	computed: {
		loginUser() {
			return uni.getStorageSync('loginUser')
		},
	},
	methods: {
		getUserWorkRange() {
			this.$request
				.request('workstand-platform/moduleDetail/getUserWorkRange', {
					data: {},
				})
				.then((rsp) => {
					this.userWorkRange = rsp.data
				})
		},
		closePopup() {
			this.$refs.scopePickRef.close()
			this.$emit('close')
		},
		openPopup() {
			this.$refs.scopePickRef.open('bottom')
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
				this.getUserWorkRange()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.popup-bottom {
	box-shadow: none;
}
.default-button {
	border-radius: 50rpx;
}
.item-icon {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background-color: #c1c1c1;
	margin-right: 10rpx;
}
</style>
